<template>
  <view class="user-card">
    <view class="user-avatar" @tap="$emit('change-avatar')">
      <image 
        :src="(userInfo && userInfo.avatar) || '/static/images/default-avatar.png'" 
        class="avatar-img"
      />
      <view class="avatar-overlay">
        <text class="iconfont icon-camera"></text>
      </view>
      <button 
        class="avatar-native-btn" 
        open-type="chooseAvatar" 
        @chooseavatar="$emit('choose-avatar', $event)"
      ></button>
    </view>
    
    <view class="user-info">
      <view class="user-name-wrapper">
        <input 
          class="user-name-input" 
          type="nickname" 
          :value="displayName" 
          placeholder="点击设置昵称"
          @nicknamereview="$emit('nickname-review', $event)"
        />
      </view>
      <view class="user-phone">{{ displayPhone }}</view>
      <view class="user-id">ID: {{ displayId }}</view>
    </view>
    
    <view class="user-status">
      <view class="status-item" :class="{ verified: isVerified }">
        <text class="iconfont" :class="isVerified ? 'icon-check-circle' : 'icon-exclamation-circle'"></text>
        {{ isVerified ? '已实名认证' : '未实名认证' }}
      </view>
      <view class="status-item role-tag">
        {{ roleText }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UserCard',
  props: {
    userInfo: {
      type: Object,
      default: null
    },
    isVerified: {
      type: Boolean,
      default: false
    },
    userRole: {
      type: String,
      default: ''
    },
    formatPhone: {
      type: Function,
      required: true
    },
    getRoleText: {
      type: Function,
      required: true
    }
  },
  emits: ['change-avatar', 'choose-avatar', 'nickname-review'],
  computed: {
    displayName() {
      return (this.userInfo && (this.userInfo.nickname || this.userInfo.nickName || this.userInfo.name)) || ''
    },
    displayPhone() {
      return this.formatPhone((this.userInfo && this.userInfo.phone) || '138****8888')
    },
    displayId() {
      return (this.userInfo && this.userInfo.id) || '测试用户ID'
    },
    roleText() {
      return this.getRoleText(this.userRole)
    }
  }
}
</script>

<style lang="scss" scoped>
.user-card {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 50%, #1890ff 100%);
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
  padding: 60rpx 40rpx;
  display: flex;
  align-items: center;
  color: white;
  margin: 0 24rpx 20rpx;
  border-radius: 32rpx;
  box-shadow: 
    0 20rpx 60rpx rgba(24, 144, 255, 0.25),
    0 8rpx 32rpx rgba(64, 169, 255, 0.15),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.1);
  
  &::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    animation: float 8s ease-in-out infinite;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
  }
}

.user-avatar {
  position: relative;
  margin-right: 40rpx;
  z-index: 2;
  
  .avatar-img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    border: 6rpx solid rgba(255,255,255,0.2);
    box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
    
    &:active {
      transform: scale(0.95);
    }
  }
  
  .avatar-overlay {
    position: absolute;
    bottom: 8rpx;
    right: 8rpx;
    width: 44rpx;
    height: 44rpx;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3rpx solid white;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
    
    .iconfont {
      font-size: 22rpx;
      color: white;
    }
  }
}

.avatar-native-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 140rpx;
  height: 140rpx;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  opacity: 0;
  border-radius: 50%;
}

.user-info {
  flex: 1;
  z-index: 2;
}

.user-name-wrapper {
  margin-bottom: 16rpx;
}

.user-name-input {
  font-size: 38rpx;
  font-weight: 600;
  color: white;
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
  text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
  
  &::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
  }
}

.user-phone {
  font-size: 30rpx;
  opacity: 0.9;
  margin-bottom: 12rpx;
  font-weight: 400;
  text-shadow: 0 1rpx 4rpx rgba(0,0,0,0.1);
}

.user-id {
  font-size: 26rpx;
  opacity: 0.8;
  font-weight: 300;
  text-shadow: 0 1rpx 4rpx rgba(0,0,0,0.1);
}

.user-status {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
  z-index: 2;
}

.status-item {
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10rpx);
  font-size: 22rpx;
  font-weight: 500;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  
  .iconfont {
    font-size: 22rpx;
    margin-right: 8rpx;
  }
  
  &.verified {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.3);
  }
}

.role-tag {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%) rotate(45deg);
    opacity: 0;
  }
}
</style>